<!--
 * @Description: 计算器-税费设定头部
  * @Version: 1.0
 * @Autor: chenwg
 * @Date: 2024-01-16 19:11:31
 * @LastEditors: chenwg
 * @LastEditTime: 2024-01-16 19:11:31
-->
<template>
  <div class="taxHeader">
    <div class="category">
      <svg-icon iconName="line" />
      <span>{{ title }}</span>
      <svg-icon iconName="linefoot" />
    </div>
    <jy-radio-group
      showTab
      v-model="radioValue"
      size="mini"
      v-if="!isTax"
      @change="getRadio"
    >
      <jy-radio-button
        v-for="i in radioList"
        :key="i.value"
        :label="i.label"
      ></jy-radio-button>
    </jy-radio-group>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    title: {
      type: String,
      default: "资金交易手续费",
    },
    isTax: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      radioValue: "银行间",
      radioList: [
        {
          label: "银行间",
          value: "bank",
        },
        {
          label: "上交所",
          value: "shang",
        },
        {
          label: "深交所",
          value: "shen",
        },
      ],
    };
  },
  methods: {
    getRadio(val) {
      this.$emit("changeTab", val);
    },
  },
};
</script>

<style lang="less" scoped>
.taxHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .category {
    margin-top: 12px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    svg {
      height: 22px;
      &:first-of-type {
        max-width: 7px;
      }
      &:last-of-type {
        max-width: 50px;
      }
    }
    span {
      font-weight: 600;
      color: var(--c-text);
      display: inline-block;
      height: 22px;
      line-height: 22px;
      margin-left: 5px;
      margin-right: -5px;
      background: linear-gradient(
        270deg,
        #f0f1f3 0%,
        rgba(229, 231, 235, 0) 100%
      );
      padding-left: 5px;
    }
  }
}
</style>
